* @Author: yyf
* @Date: 2018/4/10
* @description: 投资事件 添加页 评估公司
*/
<template>
    <div class="custom-box p-20">
        <el-row class="custom-title m-t-20 m-b-20">
            <h3>评估公司
                <button type="button" class="custom-btn custom-btn-round m-l-10" @click="addAssess('-1')">
                    <i class="fa fa-plus"></i>
                </button>
            </h3>
        </el-row>
        <el-table :data="assessCompanyData">
            <el-table-column label="ID" prop="id" ></el-table-column>
            <el-table-column label="评估公司" prop="appraisedName"></el-table-column>
            <el-table-column label="评估基准日" prop="referenceDate">
                <template slot-scope="scope">
                    {{scope.row.referenceDate | cmsMoment}}
                </template>
            </el-table-column>
            <el-table-column label="评估方法" prop="appraiseWay">
                <template slot-scope="scope">
                    {{scope.row.appraiseWay | getDicNameById('appraiseWay')}}
                </template>
            </el-table-column>
            <el-table-column label="评估值" prop="appraiseValue"></el-table-column>
            <el-table-column label="增值率(%)" prop="appreciationRate"></el-table-column>
            <el-table-column label="评估对象" prop="appraiseTarget"></el-table-column>
            <el-table-column label="价值类型" prop="worthType">
                <template slot-scope="scope">
                    {{scope.row.worthType | getDicNameById('worthType')}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="260px">
                <template slot-scope="scope">
                    <el-button type="text" @click="addAssess('1', scope.row)">编辑</el-button>
                    <el-button type="text" @click="relevance(1, scope.row)" v-if="scope.row.status!==1">关联</el-button>
                    <el-button type="text" @click="relevance(2, scope.row)" v-if="scope.row.status===1">取消关联</el-button>
                    <el-button type="text" @click="deleteApprise(scope.row.id)">删除</el-button>
                    <el-button type="primary" @click="editReport(scope.row.id)">编辑报告</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="addAssessDialog" title="评估公司">
            <el-form label-width="90px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="评估基准日">
                            <el-date-picker v-model="eventAppraiseDto.referenceDate" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="评估方法">
                            <el-select v-model="eventAppraiseDto.appraiseWay" class="w-100">
                                <el-option 
                                    v-for="item in appraiseWay" 
                                    :key="item.dictValue" 
                                    :value="item.dictValue-0" 
                                    :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="评估公司">
                            <el-input v-model="eventAppraiseDto.appraisedName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label-width="10px">
                            <el-select v-model="searchType" class="w-100">
                                <el-option 
                                    v-for="item in openSearchNameType" 
                                    :key="item.dictValue" 
                                    :value="item.dictValue" 
                                    :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item label-width="10px">
                            <el-button type="primary" @click="getCompanyInfo">查询</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="币种">
                            <el-select v-model="eventAppraiseDto.currencyType" class="w-100">
                                <el-option 
                                    v-for="item in currencyType" 
                                    :key="item.dictValue" 
                                    :value="item.dictValue-0" 
                                    :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="评估值">
                            <el-input v-model="eventAppraiseDto.appraiseValue">
                                <template slot="append">万</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="增值率">
                            <el-input v-model="eventAppraiseDto.appreciationRate">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="评估对象">
                            <el-input v-model="eventAppraiseDto.appraiseTarget"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="价值类型">
                            <el-select v-model="eventAppraiseDto.worthType" class="w-100">
                                <el-option 
                                    v-for="item in worthType" 
                                    :key="item.dictValue" 
                                    :value="item.dictValue-0" 
                                    :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="align-center">
                    <el-button type="primary" @click="saveAppraise" round>确定</el-button>
                    <el-button @click="cancelAssessCompany" round>取消</el-button>
                </el-row>
            </el-form>
        </el-dialog>
        <el-dialog :visible.sync="editReportDialog" title="评估报告">
            <el-table :data="reportData" border class="m-b-20">
                <el-table-column label="报告标题" align="center" prop="reportName">
                    <template slot-scope="scope">
                        <el-row>
                            <el-col :span="16" class="report-name">{{scope.row.reportName}}</el-col>
                            <el-col :span="8">
                                <el-button type="text" @click="downloadFile(scope.row.reportName, scope.row.reportUrl)">下载</el-button>
                                <el-button type="text" @click="deleteReport(scope.$index)">删除</el-button>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <el-row class="align-center m-b-30">
                <el-button type="primary" @click="autoDownload">自动下载</el-button>
                <Upload :title="'上传'" @onSuccess="onSuccess" class="upload-btn"></Upload>
            </el-row>
            <el-row class="align-center">
                <el-button type="primary" @click="saveReport">确定</el-button>
                <el-button @click="editReportDialog=false">取消</el-button>
            </el-row>
        </el-dialog>
        <el-dialog :visible.sync="enterpriseDialog">
            <CompanyTable :mainCompanySearch="mainCompanySearch"
                        ref="companyTable"
                        @getName="getName">
            </CompanyTable>
        </el-dialog>
        <el-dialog :visible.sync="autoDownloadDialog" title="自动下载">
            <el-form label-width="120px">
                <el-row>
                    <el-form-item label="报告题目">
                        <el-input v-model="fileName"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="报告URL">
                        <el-input v-model="fileUrl"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="align-center">
                    <el-button type="primary" @click="automaticUploadFile" round>确定</el-button>
                    <el-button @click="closeAutoDownload" round>取消</el-button>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import Vue from 'vue';
    import { Component } from 'vue-property-decorator';
    import { EventAppraiseDto, EventAppraiseReportDto, EventAppraiseReportDetailDto } from '../../../../api/Interface';
    import { EventPublicSearchDto } from '../../../../service/event/Interface';
    import AppraiseService from '../../../../service/event/appraise-company/index';
    import commonService from '../../../../service/common/index';
    import CompanyTable from '../../../../components/companyTable/index.vue';
    import Upload from '../../../../components/upload/index.vue';
    import { CompanySearch } from '../../../../service/common/interface';
    import Api from '../../../../api/common/commonController.api';
    import getUrl from '../../../../service/getUrl';
    @Component({
        components: {
            CompanyTable, // 企业信息table
            Upload, // 上传组件
        }
    })
    export default class AssessCompany extends Vue {
        // 字典中获取下拉菜单列表
        public openSearchNameType = this.$store.state.user.dictionary.dicList.openSearchNameType; // 查询类型
        public currencyType = this.$store.state.user.dictionary.dicList.currencyType; // 货币类型
        public appraiseWay = this.$store.state.user.dictionary.dicList.appraiseWay; // 评估方法
        public worthType = this.$store.state.user.dictionary.dicList.worthType; // 价值类型
        // 初始化定义类型
        public eventAppraiseDto: EventAppraiseDto = {} as EventAppraiseDto; // 添加评估公司参数 
        public eventPublicSearchDto: EventPublicSearchDto = {} as EventPublicSearchDto; // 请求列表参数
        public eventAppraiseReportDto: EventAppraiseReportDto = {} as EventAppraiseReportDto; // 添加报告参数
        public assessCompanyData: Array<EventAppraiseDto> = [];
        public eventId: string = '';
        public companySearch: CompanySearch = {} as CompanySearch; // 根据条件搜索企业
        public businessId: string = ''; // 当前评估报告ID
        public searchType: string = 'full_name'; // 搜索企业类型
        public addAssessDialog: boolean = false; // 评估公司弹框
        public editReportDialog: boolean = false; // 编辑报告弹框
        public enterpriseDialog: boolean = false; // 企业信息弹框
        public autoDownloadDialog: boolean = false; // 自动下载弹框
        public isAdd: boolean = false; // 添加true  修改false
        public mainCompanySearch = {};
        public reportData: Array<EventAppraiseReportDetailDto> = []; // 评估报告列表
        public fileName: string = ''; // 报告题目
        public fileUrl: string = ''; // 报告URL

        // refs
        public $refs: {
            companyTable: HTMLFormElement;
        };

        // 声明周期钩子  EventPublicSearchDto
        public mounted() {
            this.eventId = this.$route.params.eventId;
            this.getEventAppraisePage();
        }
        // 获取评估公司列表
        public async getEventAppraisePage() {
            this.eventPublicSearchDto['pageParam.pageIndex'] = 1;
            this.eventPublicSearchDto['pageParam.pageSize'] = 10;
            this.eventPublicSearchDto.eventId = this.eventId;
            const res = await AppraiseService.getEventAppraisePage(this.eventPublicSearchDto);
            if (res.resCode === '0') {
                this.assessCompanyData = res.data.resultData;
            }
        }
        // 添加 / 编辑 按钮
        public addAssess(num: string, info: EventAppraiseDto) {
            this.addAssessDialog = true;
            if (num === '-1') {
                this.isAdd = true;
                this.eventAppraiseDto = {} as EventAppraiseDto;
            } else {
                this.isAdd = false;
                this.eventAppraiseDto = info;
            }
        }
        // 保存
        public saveAppraise() {
            this.eventAppraiseDto.eventId = Number(this.eventId);
            if (this.isAdd) {
                this.saveEventAppraise();
            } else {
                this.updateEventAppraise();
            }
        }
        // 添加评估公司
        public async saveEventAppraise() {
            if (!this.eventAppraiseDto.appraiseId) {
                this.$message.warning('请选择评估公司');
            }  else {
                const res = await AppraiseService.saveEventAppraise(this.eventAppraiseDto);
                if (res.resCode === '0') {
                    this.$message.success('添加成功！');
                    this.addAssessDialog = false;
                    this.getEventAppraisePage();
                }
            }
        }
        // 修改评估公司
        public async updateEventAppraise() {
            const res = await AppraiseService.updateEventAppraise((this.eventAppraiseDto));
            if (res.resCode === '0') {
                this.$message.success('修改成功！');
                this.addAssessDialog = false;
                this.getEventAppraisePage();
            }
        }
        // 取消添加评估公司
        public cancelAssessCompany() {
            this.addAssessDialog = false;
        }
        // 获取企业id+name
        public getName(company: {id: number, name: string}) {
            this.eventAppraiseDto.appraisedName = company.name;
            this.eventAppraiseDto.appraiseId = company.id;
            this.enterpriseDialog = false;
        }
        // 删除评估公司
        public deleteApprise(id: number) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await AppraiseService.deleteEventAppraise(id);
                if (res.resCode === '0') {
                    this.$message.success('删除成功！');
                    this.getEventAppraisePage();
                }
            });
        }
        // 查询企业信息--获取企业名字
        public async getCompanyInfo() {
            this.enterpriseDialog = true;
            this.mainCompanySearch = {
                name: this.eventAppraiseDto.appraisedName ? this.eventAppraiseDto.appraisedName : '',
                searchType: this.searchType,
                attribute: 10,
            };
            this.$nextTick( () => {
                this.$refs.companyTable.getCompanyOpenSearchData(this.mainCompanySearch);
            });
        }
        // 关联
        public relevance(num: number, item: EventAppraiseDto) {
            const message = num === 1 ? '确定信息关联？' : '取消信息关联？';
            const info = num === 1 ? '信息关联成功！' : '取消信息关联成功！';
            this.$confirm(message, '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
            }).then( async () => {
                item.status = num;
                const {resCode} = await AppraiseService.updateEventAppraise(item);
                if (resCode === '0') {
                    this.$message.success(info);
                    this.getEventAppraisePage();
                }
            });
        }
        // 编辑报告
        public async editReport(id: number) {
            this.reportData = [];
            this.businessId = id.toString();
            // 获取报告列表
            const res = await AppraiseService.getEventAppraiseReport(this.businessId);
            if (res.resCode === '0') {
                this.reportData = res.data.eventAppraiseReportList;
            }
            this.editReportDialog = true;
        }
        // 上传报告成功
        public onSuccess(fileDirList: string[], fileNameList: string[]) {
            fileNameList.map( (name: string, index) => {
                this.reportData.push({
                    businessId: Number(this.businessId),
                    reportName: name,
                    id: 0,
                    reportUrl: fileDirList[index]
                });
            });
        }
        // 添加报告
        public async saveReport() {
            this.eventAppraiseReportDto.businessId = Number(this.businessId);
            this.eventAppraiseReportDto.eventAppraiseReportList = this.reportData;
            const res = await AppraiseService.saveOrUpdateEventAppraiseReport(this.eventAppraiseReportDto);
            if (res.resCode === '0') {
                this.$message.success('上传成功！');
                this.editReportDialog = false;
            }
        }
        // 删除报告
        public deleteReport(id: number) {
            this.$confirm('确认删除报告?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then( () => {
                this.reportData.splice(id, 1);
            });
        }
        // 打开自动下载报告
        public autoDownload() {
            this.autoDownloadDialog = true;
            this.fileName = '';
            this.fileUrl = '';
        }
        public closeAutoDownload() {
            this.autoDownloadDialog = false;
        }
        // 下载
        public downloadFile(reportName: string, reportUrl: string) {
            window.open(getUrl() + Api.download.url
            + '?Authorization=Bearer ' + this.$store.state.user.token
            + '&fileName=' + reportName
            + '&fileUrl=' + reportUrl);
        }
        // 自动下载
        public async automaticUploadFile() {
            const res = await commonService.automaticUploadFile(this.fileName, this.fileUrl);
            if (res.resCode === '0') {
                this.reportData.push({
                    businessId: Number(this.businessId),
                    reportName: res.data.fileName,
                    id: 0,
                    reportUrl: res.data.fileUrl
                });
                this.autoDownloadDialog = false;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .noPass {
        color: #f00;
    }
    .w-100 {
        width: 100%;
    }
    .align-center-self {
        text-align: center;
        line-height: 40px;
    }
    .upload-btn {
        display: inline-block;
        margin-left: 20px;
    }
    .report-name {
        font-size: 14px;
        line-height: 40px;
    }
</style>